<template>
    <div style="width: 100vw;height: 100vh;">
        <div class=" map_warp" :style="{ transform: `scale(${scaleRatio})` }">
            <div class="map_header">
                <div class="map_header_left">{{ dayweather }} {{ daytemp }}℃</div>
                <div class="map_header_center">贞一环境智慧运管中心</div>
                <div class="map_header_rihgt">
                    <span>{{ dateFormat(date) }} </span>
                    <img style="width: 30px;height: 30px;" src="../imgUrl/mapOut.png" alt="">
                    <span @click="closeFun" style="font-size: 26px;padding: 0 10px;">关闭</span>
                </div>
            </div>
            <div class="map_center">
                <div class="map_center_left">
                    <div class="mapleft">
                        <img style="width: 100%;height: 100%;" src="../imgUrl/mapleft.png" alt="">
                    </div>
                    <div style="padding-left: 33px;">
                        <div class="mapleft_card ">
                            <div class="maptitle">设备总览</div>
                            <div class="mapleft1">
                                <div style="width: 216px;padding-top: 20px;">
                                    <PieMapChart :pieData="isForm"></PieMapChart>
                                </div>
                                <div class="mapleft1_sticit">
                                    <div class="sticit_header">安全生产
                                        <div class="header_num" :key="index" v-for="(item, index) of dayData">{{ item }}
                                        </div>
                                        天
                                    </div>
                                    <div class="sticit_number">
                                        <div style="text-align: center;color: #00C8FF;">
                                            <div class="sticit_number1">
                                                {{ isForm.normalData }}
                                            </div>
                                            <div style="margin-top: 15px;padding-left: 15px;">正常设备</div>
                                        </div>
                                        <div style="text-align: center;color: #FF002E;">
                                            <div class="sticit_number2">
                                                {{ isForm.forewarningData }}
                                            </div>
                                            <div style="margin-top: 15px;padding-left: 15px;">预警设备</div>
                                        </div>
                                        <div style="text-align: center;color: #AFCFFF;">
                                            <div class="sticit_number3">
                                                {{ isForm.offlineData }}
                                            </div>
                                            <div style="margin-top: 15px;padding-left: 15px;">离线设备</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mapleft_card">
                            <div class="maptitle">告警统计</div>
                            <div>
                                <barMapChart></barMapChart>
                            </div>
                        </div>
                        <div class="mapleft_card">
                            <div class="maptitle">实时告警</div>
                            <div class="maptable_list auto-scroll-row">
                                <div class="maptable_li" style="text-align: left;">战点名称</div>
                                <div class="maptable_li" style="text-align:center;">告警类型</div>
                                <div class="maptable_li" style="text-align: center;">告警时间</div>
                                <div class="maptable_li" style="text-align: right;">设备状态</div>
                            </div>
                            <div class="maptable">
                                <autoScroll :step="1" :period="100" :cycle="true" :resume-smooth="true">
                                    <div class="maptable_list auto-scroll-row" :key="index"
                                        v-for="(item, index) of mapInspection">
                                        <div class="maptable_li" style="text-align: left;">{{ item.name }}</div>
                                        <div class="maptable_li" style="text-align:center;">{{ item.times }}</div>
                                        <div class="maptable_li" style="text-align: center;">{{ item.remerk }}</div>
                                        <div class="maptable_li" style="text-align: right;">{{ item.remerk }}</div>
                                    </div>
                                </autoScroll>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="map_center_map">
                    <MapChart></MapChart>
                </div>
                <div class="map_center_right">
                    <div style="padding-right: 25px;">
                        <div class="mapRight_card">
                            <div class="maptitle">能耗监控</div>
                            <div class="mapRight_cardFlex">
                                <div class="cardFlex_img">
                                    <div class="cardFlex_text">今日耗电量</div>
                                    <div class="cardFlex_num">
                                        0
                                    </div>
                                </div>
                                <div class="cardFlex_img">
                                    <div class="cardFlex_text">今日进水量</div>
                                    <div class="cardFlex_num">0</div>
                                </div>
                                <div class="cardFlex_img">
                                    <div class="cardFlex_text">今日处理量</div>
                                    <div class="cardFlex_num">0</div>
                                </div>
                            </div>
                        </div>
                        <div class="mapRight_card">
                            <div class="maptitle">能耗统计</div>
                            <div>
                                <lineAndebarMapChart></lineAndebarMapChart>
                            </div>
                        </div>
                        <div class="mapRight_card">
                            <div class="maptitle">能耗监控</div>
                            <div>
                                <barMapGeeChart />
                            </div>
                        </div>
                    </div>
                    <div class="mapRight">
                        <img style="width: 100%;height: 100%;" src="../imgUrl/mapright.png" alt="">
                    </div>
                </div>
            </div>
            <div class="map_food">
                <div class="map_food_btn" @click="mapFoodBtn(1)">地图总览</div>
                <div class="map_food_btn" @click="mapFoodBtn(2)">设备管理</div>
                <div class="map_food_btn" @click="mapFoodBtn(3)">数据分析</div>
            </div>

        </div>
    </div>
</template>

<script>
import PieMapChart from './components/PieMapChart.vue'
import MapChart from './components/MapChart.vue'
import barMapChart from './components/barMapChart.vue'
import lineAndebarMapChart from './components/lineAndebarMapChart.vue'
import barMapGeeChart from './components/barMapGeeChart.vue'
import axios from 'axios'
import autoScroll from 'vue-list-auto-scroll-tsc'
import AMapLoader from '@amap/amap-jsapi-loader'
import { listDeviceShort } from '@/api/iot/device';
export default {
    name: 'mapping',
    components: {
        PieMapChart,
        MapChart,
        autoScroll,
        barMapChart,
        lineAndebarMapChart,
        barMapGeeChart
    },
    data() {
        return {
            rolesBoll: true,
            scaleRatio: 1,
            screenWidth: 0,
            widthNum: 1280,
            heightNum: 540,
            latitude: '',
            longitude: '',
            dayweather: '',
            daytemp: '',
            date: new Date(),
            timer: null,
            // mapInspection: [{
            //     name: '1xx站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '2xx站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // },
            // {
            //     name: '3XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // },
            // {
            //     name: '4XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '5XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '6XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '7XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }],
            mapInspection: [],
            dayData: '0',
            isForm: {
                normalData: 0,
                forewarningData: 0,
                offlineData: 0
            }

        }
    },
    created() {
        this.mapFun();
        this.daysUntil();
        this.deviceListFun();
        // this.getAreaIp()
    },
    mounted() {

        let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            _this.date = new Date(); // 修改数据date
        }, 1000)
        // this.getCurrentPosition()
        this.updateScreenWidth(); // 初始化宽度
        window.addEventListener('resize', this.updateScreenWidth); // 监听窗口大小变化

    },
    methods: {
        /** 查询所有简短设备列表 */
        deviceListFun() {
            let params = {
                pageSize: 999,
                pageNum: 1,
            }
            listDeviceShort(params).then((response) => {
                let deviceList = response.rows;
                this.isForm.normalData = deviceList.length;
            });
        },
        daysUntil() {
            let today = new Date();
            let endDate = new Date('2024-12-01T00:00:00')
            const oneDay = 24 * 60 * 60 * 1000; // 每天的毫秒数
            let isData = Math.round(Math.abs((endDate - today) / oneDay));
            this.dayData = isData + ''
        },
        mapFun() {
            window._AMapSecurityConfig = {
                securityJsCode: "249fc67c47f2650bfeec222499e82c16",
            };
            AMapLoader.reset()
            const _this = this
            AMapLoader.load({
                key: '37ab382ecdb27440a23c0a28853e8c86', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: []  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加
            })
                .then((AMap) => {
                    AMap.plugin('AMap.Weather', function () {
                        //创建天气查询实例
                        var weather = new AMap.Weather();
                        //执行实时天气信息查询
                        weather.getLive('信阳市', function (err, data) {
                            _this.dayweather = data.weather + ' ' + "风向" + data.windDirection + ' ' + "风力" + data.windPower + "级" + ' '
                            _this.daytemp = data.temperature
                        });
                    });
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        updateScreenWidth() {
            this.screenWidth = window.innerWidth;
            this.scaleRatio = this.screenWidth / 2560
        },

        getCurrentPosition() {
            if (navigator.geolocation) {
                var options = {
                    enableHighAccuracy: true, //布尔值，表示系统是否使用最高精度来表示结果，注意，这会导致较慢的响应时间或者增加电量消耗（比如对于支持gps的移动设备来说）。如果值为false ，设备会通过更快响应以及/或者使用更少的电量等方法来尽可能的节约资源。默认值fasle
                    timeout: 50000, //它表明的是设备必须在多长时间（单位毫秒）内返回一个位置。默认直到获取到位置才会返回值。
                    maximumAge: 0, //表明可以返回多长时间（即最长年龄，单位毫秒）内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置，而且必须去获取一个真实的当前位置。默认0
                };
                navigator.geolocation.getCurrentPosition(
                    this.showPosition,
                    this.errorPosition,
                    options
                );
            } else {
                this.errorPositionTxt = "不支持获取用户当前位置";
            }
        },
        showPosition(position) {
            this.latitude = position.coords.latitude;
            this.longitude = position.coords.longitude;
            this.getArea();
        },
        errorPosition(error) {
            switch (error.code) {
                // 不允许获取当前位置
                case error.PERMISSION_DENIED:
                    this.errorPositionTxt = "不允许获取当前位置";
                    break;
                // 无法获取当前位置
                case error.POSITION_UNAVAILABLE:
                    this.errorPositionTxt = "无法获取当前位置";
                    break;
                // 获取位置的请求超时。
                case error.TIMEOUT:
                    this.errorPositionTxt = "获取位置请求超时。";
                    break;
                // 获取位置操作超时
                case error.UNKNOWN_ERROR:
                    this.errorPositionTxt = "获取位置操作超时";
                    break;
            }
        },

        getAreaIp() {
            axios({
                method: 'get',
                // url: 'https://api.songzixian.com/api/ip',
                url: 'https://api.oioweb.cn/api/weather/GetWeather',
                params: {
                    // dataSource: 'generic_ip',
                }
            }).then((res) => {
                if (res.data.code == 200) {
                    // this.getArea(res.data.data.city)
                    let temp = res.data.result.condition
                    this.daytemp = temp.min_degree + "~" +
                        temp.max_degree
                    this.dayweather = temp.day_weather + "转" + temp.night_weather
                } else {
                    this.$modal.msgError("查询失败");
                }

            })
        },
        getArea(long) {
            let _this = this
            // axios({
            //     method: 'get',
            //     url: 'https://api.songzixian.com/api/weather',
            //     params: {
            //         dataSource: 'gentle_breeze_weather',
            //         weatherType: 'real_time',
            //         location: long
            //     }
            // }).then((res) => {
            //     if (res.data.code == 200) {
            //         console.log(res.data.data)
            //     } else {
            //         this.$modal.msgError("天气查询失败");
            //     }

            // })
            axios({
                url: "https://restapi.amap.com/v3/weather/weatherInfo",
                method: "GET",
                params: {
                    key: "e0c48eb92615d1ab98b5ad25d3c6a044",
                    city: long,
                    extensions: 'all',
                    // output: "JSON"
                },
            }).then(function (response) {
                console.log("查询到的天气哪去了" + response.data.forecasts[0].casts
                [0].dayweather)
                _this.dayweather = response.data.forecasts[0].casts
                [0].dayweather
                _this.daytemp = response.data.forecasts[0].casts
                [0].nighttemp + "~" + response.data.forecasts[0].casts
                [0].daytemp
            }).catch(function (error) {

            })
        },
        dateFormat(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            /* 在日期格式中，月份是从0开始的，因此要加0
            * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
            * */
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            // 拼接
            return month + "月" + day + "日" + " " + hours + ":" + minutes + ":" + seconds;
        },
        mapFoodBtn(type) {
            this.$emit('success1', {
                type: type
            })

        },
        isLocalEnvironment() {

        },
        closeFun() {
            window.close();
        }
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.updateScreenWidth); // 移除监听器
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    }
}
</script>

<style lang="scss" scoped>
body,
html {
    margin: 0;
    padding: 0;
}

.map_warp {
    width: 2560px;
    height: 1080px;
    background-image: url(../imgUrl/mapbj.png);
    background-size: 100% 100%;
    transform-origin: 0% 0%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    .map_header {
        width: 2560px;
        height: 200px;
        background-image: url(../imgUrl/mapheader.png);
        background-size: 100% 100%;
        color: white;
        position: relative;

        .map_header_left {
            padding-left: 30px;
            padding-top: 41px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 32px;
            color: #a3b1b8;
            line-height: 38px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            position: absolute;
            left: 0;
            top: 0;
        }

        .map_header_center {
            flex: 1;
            text-align: center;
            padding-top: 36px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: 800;
            font-size: 50px;
            color: #FFFFFF;
            line-height: 59px;
            letter-spacing: 5px;
            text-shadow: 2px 4px 4px #11247A;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }

        .map_header_rihgt {
            text-align: right;
            padding-right: 20px;
            padding-top: 41px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 30px;
            color: #a3b1b8;
            line-height: 38px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            position: absolute;
            right: 20px;
            top: 0;
        }
    }

    .map_food {
        width: 2560px;
        height: 90px;
        background-image: url(../imgUrl/mapfood.png);
        margin-top: -45px;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;

        .map_food_btn {
            background-image: url(../imgUrl/mapfoodbtn.png);
            background-size: 100% 100%;
            width: 183px;
            height: 62px;
            color: white;
            text-align: center;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 28px;
            line-height: 62px;
            letter-spacing: 1px;
            text-shadow: 0px 3px 10px #0032B2;
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin-right: 12px;
            margin-top: -30px;
            display: inline-block;
            cursor: pointer;
        }
    }

    .map_center {
        width: 100%;
        margin-top: -100px;
        display: flex;

        .map_center_left {
            display: flex;

            .mapleft {
                width: 44.5px;
            }

            .mapleft_card {
                width: 580px;
                height: 292.1px;
                background-image: url(../imgUrl/mapcard.png);
                background-size: 100% 100%;
                margin-bottom: 20px;

                .maptable {
                    width: 96%;
                    height: 200px;
                    padding: 10px 0;
                    overflow: hidden;
                    text-align: center;
                    margin: 0px auto;

                    ::-webkit-scrollbar {
                        display: none;
                    }


                }

                .maptable_list {
                    display: flex;
                    width: 100%;
                    height: 30px;
                    background: rgba(0, 163, 255, 0.3);
                    border-radius: 0px 0px 0px 0px;
                    color: rgba(255, 255, 255, 1);
                    padding: 5px;
                    margin-top: 3px;

                    .maptable_li {
                        width: 25%;
                        overflow: hidden;
                    }
                }

                .mapleft1 {
                    display: flex;

                    .mapleft1_sticit {
                        color: white;
                        font-family: DIN, DIN;
                        font-weight: bold;
                        font-size: 20px;
                        line-height: 23px;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;

                        .sticit_header {
                            text-align: center;
                            margin: 30px 0;


                            .header_num {
                                width: 22px;
                                text-align: center;
                                background-image: url(../imgUrl/maonum.png);
                                background-size: 100% 100%;
                                display: inline-block;
                                font-family: DIN, DIN;
                                font-weight: bold;
                                font-size: 20px;
                                line-height: 23px;
                                font-style: normal;
                                text-transform: none;
                            }
                        }

                        .sticit_number {
                            display: flex;
                            font-size: 10px;
                            margin-top: 10px;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: 400;
                            font-size: 18px;
                            color: #00C8FF;
                            line-height: 21px;
                            text-align: center;
                            font-style: normal;
                            text-transform: none;

                            .sticit_number1 {
                                width: 88px;
                                height: 88px;
                                background-image: url(../imgUrl/mapnumbule.png);
                                background-size: 100% 100%;
                                margin-left: 20px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-family: DINPro, DINPro;
                                font-weight: bold;
                                font-size: 47px;

                                line-height: 41px;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }

                            .sticit_number2 {
                                width: 88px;
                                height: 88px;
                                background-image: url(../imgUrl/mapNumred.png);
                                background-size: 100% 100%;
                                display: flex;
                                margin-left: 20px;
                                justify-content: center;
                                align-items: center;
                                font-family: DINPro, DINPro;
                                font-weight: bold;
                                font-size: 47px;

                                line-height: 41px;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }

                            .sticit_number3 {
                                width: 88px;
                                height: 88px;
                                background-image: url(../imgUrl/mapnumgary.png);
                                background-size: 100% 100%;
                                margin-left: 20px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-family: DINPro, DINPro;
                                font-weight: bold;
                                font-size: 47px;

                                line-height: 41px;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }

                        }

                    }
                }
            }


        }

        .map_center_map {
            flex: 1;
            padding-top: 50px;
        }

        .map_center_right {
            display: flex;

            .mapRight {
                width: 44.5px;
            }

            .mapRight_card {
                width: 580px;
                height: 292.1px;
                background-image: url(../imgUrl/mapcard.png);
                background-size: 100% 100%;
                margin-bottom: 20px;

                .mapRight_cardFlex {
                    display: flex;
                    margin-top: 42px;

                    .cardFlex_img {
                        width: 180px;
                        height: 145px;
                        background-image: url(../imgUrl/maprightbj.png);
                        background-size: 100% 100%;
                        margin-left: 9px;
                        color: white;


                        .cardFlex_text {
                            font-family: Afacad, Afacad;
                            font-weight: 400;
                            font-size: 17px;
                            color: #00C2FF;
                            line-height: 25px;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                            padding: 6px;
                        }

                        .cardFlex_num {
                            font-family: Afacad, Afacad;
                            font-weight: 400;
                            font-size: 28px;
                            color: #FFFFFF;
                            line-height: 25px;
                            letter-spacing: 1px;
                            text-shadow: 0px 0px 5px #0075FF;
                            text-align: right;
                            font-style: normal;
                            text-transform: none;
                            padding: 35px 15px;
                        }
                    }
                }
            }
        }

        .maptitle {
            margin-left: 51px;
            padding-top: 7px;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 27px;
            text-shadow: 0px 3px 3px rgba(0, 38, 95, 0.3);
            text-align: left;
            font-style: normal;
            text-transform: none;
            color: white;
        }
    }

}
</style>